<!--
 * @Author: adolphus adolphus520@163.com
 * @Date: 2022-12-10 00:33:42
 * @LastEditors: 姚杰鸿
 * @LastEditTime: 2024-11-11 15:56:14
 * @Description: file content
-->
<template>
  <li
    v-if="model.items"
    class="el-sub-menu"
    :class="{
      'is-opened': isExtend,
      'is-active': !model.active && isExtend,
    }"
    @click="extend(model.id)"
  >
    <div class="el-sub-menu__title">
      <i class="el-icon mgl">
        <font-awesome-icon
          :icon="
            model.icon != undefined && model.icon.split(':').length > 1
              ? model.icon.split(':')[1].split(' ')
              : ['far', 'fa-circle']
          "
      /></i>
      <span v-if="showTitle">{{ model.name }}</span>
      <transition name="title-fade">
        <font-awesome-icon
          v-if="showTitle"
          :icon="['fas', 'fa-angle-down']"
          class="el-sub-menu__icon-arrow"
          :class="isExtend ? 'icon-arrow-rotate' : 'icon-arrow-rotate2'"
        ></font-awesome-icon>
      </transition>
    </div>
    <transition v-if="model.items" name="extend">
      <ul v-if="isExtend" class="el-menu el-menu--inline">
        <MdsMenuItem
          v-for="(item, index) in model.items"
          :key="index"
          :model="item"
          :show-title="showTitle"
          @extend="extend"
          @menu-click="menuClick"
        ></MdsMenuItem>
      </ul>
    </transition>
  </li>
  <li
    v-else
    class="el-menu-item"
    :class="{ 'is-active': model.active }"
    @click="menuClick(model.id)"
  >
    <i class="el-icon mgl">
      <font-awesome-icon
        :icon="
          model.icon != undefined && model.icon.split(':').length > 1
            ? model.icon.split(':')[1].split(' ')
            : ['far', 'fa-circle']
        "
      />
    </i>
    <transition name="title-fade">
      <p v-if="showTitle">{{ model.name }}</p>
    </transition>
  </li>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch } from "vue";

const emit = defineEmits(["extend", "menuClick"]);
const menuItemProps = defineProps({
    model: {
      type: Object,
      default: null,
    },
    showTitle: {
      type: Boolean,
      default: true,
    },
  }),
  menuH = ref("0px"),
  menuHx = ref("0px"),
  isExtend = ref(menuItemProps.model.isExtend),
  calcMenuH = (item: any, fst: boolean, cExt: boolean): number => {
    if (item.items && 0 < item.items.length) {
      let isExtend = item.isExtend;
      if (cExt || isExtend || fst) {
        let a = 0;
        for (let i in item.items) {
          a += calcMenuH(item.items[i], false, cExt);
        }
        return item.items.length * 55 + a;
      }
    }
    return 0;
  },
  extend = (id: string) => {
    menuHx.value = calcMenuH(menuItemProps.model, true, false) + "px";
    setTimeout(() => {
      emit("extend", id);
    }, 1);
  },
  menuClick = (id: string) => {
    emit("menuClick", id);
  };

watch(
  () => menuItemProps.model.isExtend,
  () => {
    isExtend.value = menuItemProps.model.isExtend;
  }
);
watch(
  () => menuItemProps.model,
  () => {
    menuH.value = calcMenuH(menuItemProps.model, true, true) + "px";
  }
);
onMounted(() => {
  menuH.value = calcMenuH(menuItemProps.model, true, true) + "px";
});
</script>

<style lang="scss" scoped>
// 折叠加隐藏过渡效果
.extend-enter-active,
.extend-leave-active {
  transition: all 0.5s ease;
  overflow: hidden;
}

.extend-enter-from,
.extend-leave-to {
  max-height: 0px !important;
  opacity: 0.3;
}
.extend-enter-to,
.extend-leave-from {
  max-height: v-bind("menuHx") !important;
  opacity: 1;
}

.title-fade-enter-active,
.title-fade-leave-active {
  transition: all 0.5s ease;
  overflow: hidden;
}

.title-fade-enter-from,
.title-fade-leave-to {
  opacity: 0;
}
.title-fade-enter-to,
.title-fade-leave-from {
  opacity: 1;
}

.icon-arrow-rotate {
  transform: rotate(180deg);
  transition: all 0.3s ease;
}
.icon-arrow-rotate2 {
  transform: rotate(0deg);
  transition: all 0.3s ease;
}

.mgl {
  margin-left: 11px;
}
</style>
